<template>
    <h2>会员等级列表展示</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>等级编号</td>
                <td>等级名称</td>
                <td>等级状态</td>
                <td>最大成长值</td>
                <td>最小成长值</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in Info">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.state?"是":"否"  }}</td>
                <td>{{ item.maxpoint}}</td>
                <td>{{ item.minpoint }}</td>
                <td><input type="button" value="修改" @click="EditInfo(item.id )" class="btn btn-primary">
                    <input type="button" value="删除" @click="shan(item.id )" class="btn btn-danger"></td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
//创建路由实例
const router=useRouter();
//创建响应式数据
const Info=ref([{
  id: 0,
  name: "",
  state: true,
  maxpoint: "",
  minpoint: ""
}])
//创建onMounted 注册周期钩子 页面在加载时会运行的函数
onMounted(()=>{
    LoadData();
})
//完成数据加载
const LoadData=()=>{
    axios.get("https://localhost:44376/api/Grade/Show")
    .then(res=>{
        console.log(res.data)
        //讲后台返回的数据信息保存到响应式数据中
        Info.value=res.data
    })
}
const EditInfo=(id:number)=>{
router.push({
    name:"GradeUpdate",
    params:{
        id:id
      

    }
});
}
const shan = (id : number) =>
{
    if(confirm("确定删除吗？"))
    {
        axios.delete("https://localhost:44376/api/Grade/Del?id="+id)
        .then
        (
            res=>
            {
                if(res.data > 0)
                {
                    alert("删除成功");
                    LoadData();
                }
                else
                {
                    alert("删除失败");
                }
            }
        )
    }
}
</script>